import React, { Component } from 'react'
import '../../componentStyle/pagination.css'

export default class PaginationItem extends Component {
    constructor(props) {
        super(props);

        this.state = {
            isMouse: false,
        }
    }

    handleMouseOver = () => {
        this.setState({
            isMouse: true
        });
    }

    handleMouseOut = () => {
        this.setState({
            isMouse: false
        });
    }

    handleClick = () => {
        this.props.handlePaginationItemData(this.props.index);
        // 传给父组件，改变isClick数组的值
        this.props.transfrom_currentPage(this.props.index);
    }

    render() {
        return (
            <div
                className="pageItem"
                style={{
                    border: (this.state.isMouse || this.props.currentPage === (this.props.index) ? '1px solid #00CCFF' : '1px solid #ddd'),
                    color: (this.state.isMouse || this.props.currentPage === (this.props.index) ? '#00CCFF' : '#000'),
                    cursor: 'pointer'
                }}
                key={this.props.index - 1}
                onMouseOver={this.handleMouseOver}
                onMouseOut={this.handleMouseOut}
                onClick={this.handleClick}
            >
                {this.props.index}
            </div>
        )
    }
}
